<!doctype html>
<html lang="zh-CN">

<head>
  <!-- 必须的 meta 标签 -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap 的 CSS 文件 -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="css/fonts/fontawesome-webfont.woff">
  <link rel="stylesheet" href="css/fonts/fontawesome-webfont.woff2">

  <title>交大「江湖令」</title>

  <style>
    html {
      height: 100%;
    }

    body {
      margin: 0;
      height: 100%;
      overflow:hidden;
      background:#b7eee2;
    }

    canvas{
      z-index:-1;
      position:absolute;
    }

    #app {
      width: 100%;
      height: 100%;
      /*定义为一个flex盒子*/
      display: flex;
      /*内部元素按行排列*/
      flex-direction: row;
      min-width: 400px;
      min-height: 400px;
      /* 主轴居中 */
      justify-content: center;
      /* 交叉轴居中 */
      align-items: center;
    }

    form {
      width: 20%;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 30px;
      padding: 30px 30px;
      border-radius: 8px;
      min-width: 450px;
    }
  </style>
</head>

<body>
  <div id="app">
    <form class="admin.login" style="background-color: white; opacity: 0.95;">
      <div style="text-align: center;margin-bottom:20px;">
        <img src="./control/assest/images/long_logo.png" style="width: 100%;">
      </div>
      <div class="input-group mb-2 mr-sm-2">
        <label for="u_name">
          <div class="input-group-prepend">
            <div class="input-group-text">用户名</div>
          </div>
        </label>
        <input type="text" class="form-control" id="u_name" v-model="user.u_name" required />
      </div>
      <div class="input-group mb-2 mr-sm-2">
        <label for="u_pwd">
          <div class="input-group-prepend">
            <div class="input-group-text">新密码</div>
          </div>
        </label>
        <input type="password" class="form-control" id="u_pwd" v-model="user.u_pwd" onKeyUp="pwStrength(this.value)" onBlur="pwStrength(this.value)" required />
        <table style="width: 100%; height: 20px; border:1px; border-color: #0f0f0f;">
          <tr style="background-color: #eeeeee">
            <td style="width: 33%; " id="strength_L">弱</td>
            <td width="33%" id="strength_M">中</td>
            <td width="33%" id="strength_H">强</td>
          </tr>
        </table>
      </div>
      <div class="input-group mb-2 mr-sm-2">
        <label>
          <div class="input-group-prepend">
            <div class="input-group-text">确认密码</div>
          </div>
        </label>
        <input type="password" class="form-control" id="u_cpwd" onkeyup="valid()" required>
        <span id="tishi"></span>
      </div>
      <div style="text-align: center">
        <button class="btn btn-primary" type="button" @click="updatepwd" style="width: 100%;">确认修改</button>
      </div>
    </form>
  </div>

  <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
  <script src="../js/jquery-3.6.0.slim.min.js"></script>
  <script src="../js/bootstrap.bundle.min.js"></script>
  <script src="../js/vue.global.js"></script>
  <!-- <script src="https://unpkg.com/vue"></script> -->
  <script src="../js/axios.min.js"></script>
  <script src="../js/my-axios.js"></script>
  <script src="../layer/layer.js"></script>
  <script src="../js/verificationNumbers.js" tppabs="js/verificationNumbers.js"></script>
  <script src="../js/Particleground.js" tppabs="js/Particleground.js"></script>

  <script>
    $(document).ready(function() {
      //粒子背景特效
      $('body').particleground({
        dotColor: '#5cbdaa',
        lineColor: '#5cbdaa'
      });
    });

    const app = {
      data() {
        return {
          user: {
            u_name: '',
            u_pwd: ''      // 密码
          },
          loadIdx: null
        }
      },
      methods: {
        updatepwd() {
          this.loadIdx = layer.load();
          myAxios.post('/forgetpwd', this.user)
            .then(res => {
              layer.close(this.loadIdx);
              if (res.data.success) {
                layer.msg('修改密码成功!', {
                  icon: 1,
                  time: 800
                }, () => {
                  // 闪完后跳转
                  window.location.href = '../login.html';
                });
              } else {
                layer.msg(res.data.message, {
                  icon: 2,
                  time: 1500
                });
              }
            })
            .catch(err => {
              layer.close(this.loadIdx);
              layer.msg('系统错误！', {icon: 2, time: 800});
            });
        }

      },

      //定义回调方法：mounted 该方法在页面渲染完成立即执行
      mounted(){
      }
    };

    // 判断密码强弱
    //CharMode函数
    //测试某个字符是属于哪一类.
    function CharMode(iN)
    {
      if (iN>=48 && iN <=57) //数字
        return 1;
      if (iN>=65 && iN <=90) //大写字母
        return 2;
      if (iN>=97 && iN <=122) //小写
        return 4;
      else
        return 8; //特殊字符
    }
    //bitTotal函数
    //计算出当前密码当中一共有多少种模式
    function bitTotal(num)
    {
      modes=0;
      for (i=0; i<4; i++)
      {
        if (num & 1) modes++;
        num>>>=1;
      }
      return modes;
    }
    //checkStrong函数
    //返回密码的强度级别
    function checkStrong(sPW)
    {
      if (sPW.length<=4)
        return 0; //密码太短
      Modes=0;
      for (i=0; i<sPW.length; i++)
      {
        //测试每一个字符的类别并统计一共有多少种模式.
        Modes|=CharMode(sPW.charCodeAt(i));
      }
      return bitTotal(Modes);
    }
    //pwStrength函数.www.qichepeijian.com
    //当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色
    function pwStrength(pwd)
    {
      O_color="#eeeeee";
      L_color="#FF0000";
      M_color="#FF9900";
      H_color="#33CC00";
      if (pwd==null||pwd=='')
      {
        Lcolor=Mcolor=Hcolor=O_color;
      }
      else
      {
        S_level = checkStrong(pwd);
        switch(S_level)
        {
          case 0:
            Lcolor = Mcolor = Hcolor = O_color;
          case 1:
            Lcolor = L_color;
            Mcolor = Hcolor = O_color;
            break;
          case 2:
            Lcolor = Mcolor = M_color;
            Hcolor = O_color;
            break;
          default:
            Lcolor=Mcolor=Hcolor=H_color;
        }
      }
      document.getElementById("strength_L").style.background=Lcolor;
      document.getElementById("strength_M").style.background=Mcolor;
      document.getElementById("strength_H").style.background=Hcolor;
      return;
    }

    // 验证两次输入密码的一致性
    function valid() {
      var pwd1 = document.getElementById("u_pwd").value;
      var pwd2 = document.getElementById("u_cpwd").value;

      if (pwd1 == pwd2) {
        document.getElementById("tishi").innerHTML="<font color='green'>两次输入的密码相同</font>";
        // document.getElementById("submit").disabled = false;
      }
      else {
        document.getElementById("tishi").innerHTML="<font color='red'>两次输入的密码不相同</font>";
        // document.getElementById("submit").disabled = true;
      }
    }

    Vue.createApp(app).mount('#app')
  </script>
</body>

</html>